<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MEGA 2.0</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript" src="../js/jquery-1.8.1.js"></script>
<script type="text/javascript" src="../js/jquery.fullscreen.js"></script>
<script type="text/javascript">
$(document).ready(function() { 

   function fullscreenVideoResizing() {
	   // Cansvas height  (4:3)
	   var h = Math.round(($(window).width()/2 - 12) * 0.75); 
	   $('.video-row').css('height', Math.round(($(window).height() - h)/2));
	   $('.video-main-container').css('height', h);
	   $('.video-main-container img').css('height', h);
	   $('.video-size-button').css('right', $('.video-size-button').offset().top);
   }
   fullscreenVideoResizing();
   
   $(window).bind('resize', function () 
   {
	  fullscreenVideoResizing();
   });
   
   $('.video-call-button').bind('click', function() {
	   if($(this).attr('class').indexOf('active') == -1) {
		   $(this).addClass('active');
		   // Video mute flipping
		   if($(this).attr('class').indexOf('video-icon') > -1) {
			   $('.video-full-canvas.current-user').addClass('video-off');
		   }
		   // Fullscreen mode
		   if($(this).attr('class').indexOf('size-icon') > -1) 
			   $(document).fullScreen(true)
	   }
	   else {
	       $(this).removeClass('active');
		   // Video mute flipping
		   if($(this).attr('class').indexOf('video-icon') > -1)  {
			   $('.video-full-canvas.current-user').removeClass('video-off');
		   }
		   // Fullscreen mode
		   if($(this).attr('class').indexOf('size-icon') > -1) 
			   $(document).fullScreen(false);
	   }
   });
  
});

</script>
</head>

<body id="bodyel">

  <div class="video-full-container">
     <div class="video-row">              
         <div class="video-full-demo-ticket"></div>
         <div class="video-full-logo"></div>
         <div class="video-size-button">
             <div class="video-call-button size-icon"><div class="video-call-border"></div></div>
         </div>
     </div>
     <div class="video-main-container">
           <!-- Please add "video-off" classname if user disabled camera !-->
           <div class="video-full-canvas">
             <div class="video-relative-block">
               <div class="video-transparent-border"></div>
               <!-- Please use canvas instead of demo img. width should be 100%, Width : Height = 4:3 !-->
               <div class="video-canvas-flip-side front">
                 <!--<img src="images/temp/video-temp-img.jpg" />-->
               </div>
               <div class="video-full-disabled-block back">
                    <div class="video-full-disabled-icon"></div>
                    <div class="video-full-disabled-txt">Camera disabled</div>
               </div>
             </div>
           </div>
           <!-- Please add "video-off" classname if user disabled camera !-->
           <div class="video-full-canvas current-user">
             <div class="video-relative-block">
               <div class="video-transparent-border"></div>
               <!-- Please use canvas instead of demo img. width should be 100%, Width : Height = 4:3 !-->
               <div class="video-canvas-flip-side front">
                 <!--<img src="images/temp/video-temp-img.jpg" />-->
               </div>
               <div class="video-full-disabled-block back">
                    <div class="video-full-disabled-icon"></div>
                    <div class="video-full-disabled-txt">Camera disabled</div>
               </div>
             </div>
           </div>
           <div class="clear"></div>
     </div>
     <div class="video-row">
              <div class="video-full-buttons">
                 <div class="video-call-button audio-icon"><div class="video-call-border"></div></div>
                 <div class="video-call-button video-icon"><div class="video-call-border"></div></div>
                 <div class="video-call-button hang-up-icon"><div class="video-call-border"></div></div>
              </div>
     </div>
  
  </div>
</body>
</html>
